<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="fonts/style.css" />
<link rel="stylesheet" href="fonts/iconfont.css" />
</head>
<body>
	<div style="width: 600px; margin: 0px auto;">
		<h1>MySql服务自动发现Demo</h1>
	</div>
	<div id="app">
		<div class="container">
			<simple-grid :data-list="gridData" :columns="gridColumns" v-on:load-entry="loadCustomer" v-on:delete-entry="deleteCustomer">
			</simple-grid>
		</div>
		<div class="container">
			<div class="form-group">
				<button @click="this.show = true">新增</button>
			</div>
		</div>
		<modal-dialog v-bind:show.sync="show">
			<header class="dialog-header" slot="header">
				<h1 class="dialog-title">{{ item.id ? '修改 - ' + item.city : '新增' }}</h1>
			</header>
			<div class="dialog-body" slot="body">
				<div v-show="item.id" class="form-group">
					<label>id</label> <input type="text" v-model="item.id"
						disabled="disabled" />
				</div>
				<div class="form-group">
					<label>city</label> <input type="text" v-model="item.city" />
				</div>
				<div class="form-group">
					<label>province</label> <input type="text" v-model="item.province" />
				</div>
				<div class="form-group">
					<label></label>
					<button @click="saveCustomer">添加</button>
				</div>
			</div>
		</modal-dialog>
	</div>
	<template id="grid-template">
		<table>
			<thead>
				<tr>
					<th v-for="col in columns">{{ col.name | capitalize }}</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(index,entry) in dataList" track-by="$index">
					<td v-for="col in columns">
						<span v-if="col.isKey">
							<a href="javascript:void(0)" @click="loadEntry(entry[col.name])">{{ entry[col.name] }}</a>
						</span>
						<span v-else>
							{{ entry[col.name] }}
						</span>
					</td>
					<td>
						<button class="btn-danger" @click="deleteEntry(entry)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</template>

	<template id="dialog-template">
	<div class="dialogs">
		<div class="dialog" v-bind:class="{ 'dialog-active': show }">
			<div class="dialog-content">
				<div class="close rotate">
					<span class="iconfont icon-close" @click="close"></span>
				</div>
				<slot name="header"></slot>
				<slot name="body"></slot>
				<slot name="footer"></slot>
			</div>
		</div>
		<div class="dialog-overlay"></div>
	</div>
	</template>
	<script src="js/vue.js"></script>
	<script src="js/vue-resource.js"></script>
	<script>
		Vue.component('simple-grid', {
			template: '#grid-template',
			props: ['dataList', 'columns'],
			methods: {
				loadEntry: function(key) {
					this.$dispatch('load-entry', key);
				},
				deleteEntry: function(entry) {
					this.$dispatch('delete-entry', entry);
				}
			}
		});
		
		Vue.component('modal-dialog', {
			template: '#dialog-template',
			props: ['show'],
			methods: {
				close: function() {
					this.show = false;
				}
			}
		});
		
		var demo = new Vue({
			el: '#app',
			data: {
				show: false,
				title: '',
				gridColumns: [{
					name: 'id',
					isKey: true
				}, {
					name: 'city'
				}, {
					name: 'province'
				}],
				gridData: [],
				apiUrl: '${pageContext.request.contextPath}/address',
				item: {}
			},
			ready: function() {
				this.getCustomers();
			},
			methods: {
				closeDialog: function() {
					this.show = false;
				},
				loadCustomer: function(id) {
					var vm = this;
					vm.gridData.forEach(function(item) {
						if (item.id === id) {
							vm.$set('item', item);
							vm.$set('show', true);
							return;
						}
					})
				}, 
				saveCustomer: function() {
					this.item.id ? this.updateCustomer() : this.createCustomer();
					this.show = false;
				},
				getCustomers: function() {
					var vm = this;
					vm.$http.get(vm.apiUrl).then((response) => {
						vm.$set('gridData', JSON.parse(response.data));
					});
				},
				createCustomer: function() {
					var vm = this
					vm.$http.post(vm.apiUrl, vm.item).then((response) => {
						vm.$set('item', {});
						vm.getCustomers();
					});
					this.show = false;
				},
				updateCustomer: function() {
					var vm = this;
					vm.$http.put(this.apiUrl + '/' + vm.item.id, vm.item).then((response) => {
						vm.getCustomers();
					});
				},
				deleteCustomer: function(customer){
					var vm = this;
					vm.$http.delete(this.apiUrl + '/' + customer.id).then((response) => {
						vm.getCustomers();
					});
				}
			}
		})
		demo.$watch('show', function(newVal, oldVal) {
			if (!newVal) {
				this.item = {};
			}
		})
	</script>
</body>
</html>